<template>
  <div>
    <el-card shadow="hover" class="content">
      <div class="content_header">
        <div class="header_info">
          <el-input
            placeholder="请输入订单号..."
            v-model="searchCustomerOrders"
          >
          </el-input>
        </div>
        <div class="header_info">
          <el-button
            class="search_customer_btn"
            type="primary"
            @click.native="selectCustomerOrdersByOrderId"
            icon="el-icon-search"
            >搜索</el-button
          >

          <el-button
            @click="selectAllCustomerOrders"
            class="search_customer_btn"
            type="primary"
            icon="el-icon-refresh"
            >刷新</el-button
          >
        </div>
      </div>

      <div class="content_body">
        <el-table :data="orders" border style="width: 100%">
          <el-table-column width="100px" prop="username" label="下单用户"> </el-table-column>

          <el-table-column prop="orderid" label="订单号"> </el-table-column>

          <el-table-column prop="productid" label="产品id"> </el-table-column>

          <el-table-column prop="productname" label="产品名"> </el-table-column>

          <el-table-column prop="producttype" label="产品类型">
          </el-table-column>
          <el-table-column prop="productsize" label="产品容量">
          </el-table-column>

          <el-table-column prop="number" label="下单数量"> </el-table-column>

          <el-table-column prop="price" label="单价（含折扣）">
          </el-table-column>

          <el-table-column prop="area" label="地区"> </el-table-column>

          <el-table-column prop="addressdetail" label="详细地址">
          </el-table-column>

          <el-table-column prop="phonenumber" label="联系电话">
          </el-table-column>

          <el-table-column label="价格审批状态" width="100px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.pricecheck === null" type="warning"
                >待审核</el-tag
              >
              <el-tag v-if="scope.row.pricecheck === 0" type="danger"
                >审核失败</el-tag
              >
              <el-tag v-if="scope.row.pricecheck === 1" type="success"
                >审核通过</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column label="风险审批状态" width="100px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.riskcheck === null" type="warning"
                >待审核</el-tag
              >
              <el-tag v-if="scope.row.riskcheck === 0" type="danger"
                >审核失败</el-tag
              >
              <el-tag v-if="scope.row.riskcheck === 1" type="success"
                >审核通过</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column label="领导审批状态" width="100px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.leadercheck === null" type="warning"
                >待审核</el-tag
              >
              <el-tag v-if="scope.row.leadercheck === 0" type="danger"
                >审核失败</el-tag
              >
              <el-tag v-if="scope.row.leadercheck === 1" type="success"
                >审核通过</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column label="订单最终状态" width="100px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.admincheck === null" type="warning"
                >待审核</el-tag
              >
              <el-tag v-if="scope.row.admincheck === 0" type="danger"
                >审核失败</el-tag
              >
              <el-tag v-if="scope.row.admincheck === 1" type="success"
                >审核通过</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="setOrderStatus(scope.row.orderid, 1)"
                type="success"
                v-show="
                  scope.row.pricecheck === scope.row.riskcheck &&
                  scope.row.riskcheck === scope.row.leadercheck &&
                  scope.row.leadercheck === 1 &&
                  scope.row.admincheck !== 1
                "
                >通过</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="pagination"
          background
          @current-change="handleCurrentChange"
          :current-page="currentPageNumber"
          :page-size="currentPageSize"
          layout="prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  selectAllCustomerOrders,
  selectCustomerOrdersByOrderId,
} from "../../api/admin";
import baseMixin from "../../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      searchCustomerOrders: "",
      currentPageNumber: 1,
      currentPageSize: 3,
      customers: [],
      width: "50px",
      orders: [],
    };
  },
  methods: {
    selectAllCustomerOrders() {
      selectAllCustomerOrders(this.currentPageNumber, this.currentPageSize)
        .then((res) => {
          this.orders = res.data.list;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    handleCurrentChange(value) {
      this.currentPageNumber = value;
      this.selectAllCustomerOrders();
    },
    async selectCustomerOrdersByOrderId() {
      if (this.searchCustomerOrders === "") {
        this.$message.error("请输入订单号");
        return;
      }
      await selectCustomerOrdersByOrderId(
        this.searchCustomerOrders,
        this.currentPageNumber,
        this.currentPageSize
      )
        .then((res) => {
          this.orders = res.data.list;
          // this.selectAllCustomerOrders();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.role = this.getUserInfo().role;
    this.selectAllCustomerOrders();
  },
  watch: {
    searchCustomerOrders(newVal, oldVal) {
      if (newVal === "") {
        this.selectAllCustomerOrders();
      }
    },
  },
};
</script>

<style lang="scss">
@import "../../assets/css/global.scss";
@import "../../assets/css/admin_management.css";
</style>